<!--
 * @Date: 2024-10-21 14:02:46
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-08 10:37:29
 * @Description: 表格布局基本渲染文件，适用于单表的情况
-->
<template>
  <div class="common-form-layout__wrapper">
    <div class="common-form-layout__body">
      <FpRender
        ref="formRenderRef"
        :="formRenderAttrs"
        @buttonClick="layoutHandler.buttonClick"
        @btnGroupRightClick="layoutHandler.btnGroupRightClick"
      />
    </div>
  </div>
</template>

<script setup>

import { useRoute } from 'vue-router'
import { useUserStore } from '@/stores/modules';

import { onBeforeMount, reactive, ref } from 'vue';

import { FpRender } from '@fp'
import { getHandler } from '@hd'

// 全局用户信息
const userInfo = useUserStore().userInfo
// 路由查询参数
const routeQuery = useRoute().query

// 表单渲染Ref
const formRenderRef = ref(null)
// 表单渲染属性
const formRenderAttrs = reactive({
  formCode: routeQuery.bjFormCode,
  autoLoad: true,
})
/**
 * 表格数据查询方法
 * 
 * @param tableName 表格的设置名称默认为baseDataTable
 */
const tableSearch = (tableName='baseDataTable') => {
  const tableRef = formRenderRef.value.getWidgetRef(tableName)
  tableRef.loadTableData()
}

const layoutState = reactive({})
const layoutHandler = ref({})

onBeforeMount(async() => {
  const params = { userInfo, routeQuery, tableSearch }
  layoutState['routeQuery'] = routeQuery
  const useLayoutHandler = await getHandler(routeQuery.handler, params)
  if (!useLayoutHandler) return
  layoutHandler.value = useLayoutHandler(params)
})

</script>

<style lang="scss" scoped>
.common-form-layout {
  &__wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  &__body {
    flex: 1;
    background: #fff;
    min-height: 100px;
  }
}
</style>